<template>
  <div>
    <div>
      <audio
        id="songAudio"
        :src="musicURL"
        v-show="false"
        controls
        @play="play()"
        @pause="pause()"
        @timeupdate="timeupdate()"
      ></audio>

      <el-image style="border: 1px solid #dcdfe6" :src="songPic"></el-image>
    </div>

    <el-drawer
      :size="150"
      :modal="false"
      :show-close="false"
      :visible.sync="drawer"
      :before-close="handleClose"
      :wrapperClosable="false"
      :withHeader="false"
      :direction="direction"
    >
      <div style="margin-top: 20px">
        <div style="display: flex">
          <div style="width: 120px">
            <el-image
              style="width: 100px; height: 100px; border: 1px solid #dcdfe6"
              :src="songPic"
            ></el-image>
          </div>

          <div style="width: 700px">
            <el-row :gutter="20">
              <div style="margin-top: 25px; width: 450px">
                <h1>
                  <span style="color: red">{{ songArtist }}</span
                  >-{{ songName }}
                </h1>
              </div>
            </el-row>
            <el-row :gutter="20">
              <div style="margin-top: 25px">
                <Progress
                  :percent="songPercent"
                  :stroke-width="5"
                  status="active"
                />
              </div>
            </el-row>
          </div>

          <div style="margin-top: 40px">
            <el-row style="display: flex">
              <div style="margin-left: 20px; width: 300px">
                <el-image
                  src="http://110.41.83.104:8888/api/image/BQ/bizui.gif"
                  class="audioImg"
                ></el-image>
                <el-image
                  src="http://110.41.83.104:8888/api/image/BQ/tuosai.gif"
                  class="audioImg"
                ></el-image>
                <el-image
                  src="http://110.41.83.104:8888/api/image/BQ/kuaikule.gif"
                  class="audioImg"
                ></el-image>
              </div>
              <div style="margin-left: 20px; width: 450px">
                <el-row>
                  <h3>{{ lrc1 }}</h3>
                </el-row>
                <el-row>
                  <h3 style="color: red; font-size: 20px">{{ lrc2 }}</h3>
                </el-row>
                <el-row>
                  <h3>{{ lrc3 }}</h3>
                </el-row>
              </div>
              <h2 style="margin-top: 20px; margin-left: 20px; width: 100px">
                <a @click="play()">播放列表</a>
              </h2>
            </el-row>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import api from "@/api/apis/musicAPI.js";

export default {
  data() {
    return {
      songId: 0,
      songName: "歌曲名称",
      songArtist: "演唱家",
      songPic: "https://file.iviewui.com/images/image-demo-11.jpg",
      songTimeStr: "0:00",
      songPercent: 0,
      drawer: true,
      direction: "btt",
      lrc1: "",
      lrc2: "",
      lrc3: "",
      songInfoData: [],
      musicURL: "",
      lrcData: [],
      lrcIndex: 0,
    };
  },
  mounted() {},
  // 在目标组件中接收参数
  created() {
    const song = this.$route.params.paramName;
    this.songArtist = song.artistStr;
    this.songName = song.songName;
    this.songPic = song.picUrl;
    this.songTimeStr = song.songTimeStr;
    this.songId = song.songId;
    this.songInfo(this.songId);
  },
  methods: {
    handleClose(done) {
      done();
    },

    songInfo(songId) {
      api.songInfo(songId).then((res) => {
        this.songInfoData = res.data.data;
        this.musicURL = this.songInfoData.songUrl;
        this.lrcData = this.songInfoData.songLrcList;
        this.lrc1 = this.lrcData[this.lrcIndex + 0].content;
        this.lrc2 = this.lrcData[this.lrcIndex + 1].content;
        this.lrc3 = this.lrcData[this.lrcIndex + 2].content;
        this.lrcIndex = 2;
      });
    },
    //播放
    play() {
      console.log("播放");
      document.getElementById("songAudio").play();
    },
    //暂停
    pause() {
      console.log("暂停");
    },
    //当播放位置被改变时触发
    timeupdate() {
      var songAudioDOM = document.getElementById("songAudio");
      let time = songAudioDOM.currentTime.toFixed(0);
      // 现在可以安全地读取duration属性
      var durationInSeconds = songAudioDOM.duration;
      this.songPercent = (time / durationInSeconds).toFixed(2) * 100;
      for (let index = this.lrcIndex; index < this.lrcData.length; index++) {
        const element = this.lrcData[index];
        var second = element.second;
        if (second == time) {
          this.lrcIndex++;
          const element1 = this.lrcData[index - 1];
          this.lrc1 = element1.content;
          this.lrc2 = element.content;
          if (index + 1 < this.lrcData.length) {
            const element3 = this.lrcData[index + 1];
            this.lrc3 = element3.content;
          }
        }
      }
    },
  },
};
</script>

<style>
.audioImg {
  padding-right: 20px;
}
</style>
